<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>驿站管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索表单 -->
		<el-row style="margin-top: 10px;">
			<el-form :inline="true" :model="queryInfo">
				<el-form-item label="驿站名称:">
					<el-input clearable @clear="querySearchCourierStationList" v-model="queryInfo.courierStationName"
						placeholder="请输入驿站名称"></el-input>
				</el-form-item>
				<el-form-item label="小区名称:">
					<el-input v-model="queryInfo.communityName" placeholder="请输入小区名称"></el-input>
				</el-form-item>
				<el-form-item label="添加时间:">
					<el-date-picker v-model="date" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="querySearchCourierStationList">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<!-- 添加驿站-->
		<el-row style="margin-top: 10px;margin-bottom: 10px;">
			<el-button type="primary" size="medium" @click="addCourierStation">添加驿站</el-button>
		</el-row>
		<!-- 表格展示数据 -->
		<el-table :data="courierStationList" :cell-style="{ 'text-align': 'center' }"
			:header-cell-style="{fontSize: '14px', backgroundColor: '#a0fa92',color:'#0c1bf2','text-align': 'center' }"
			border style="width: 100%;">
			<el-table-column prop="courierStationId" label="ID">
			</el-table-column>
			<el-table-column prop="courierStationName" label="驿站名称">
			</el-table-column>
			<el-table-column prop="courierStationAddress" label="驿站地址">
			</el-table-column>
			<el-table-column prop="courierStationCommunityName" label="所在小区">
			</el-table-column>
			<el-table-column prop="courierStationOrderCount" label="订单总数">
			</el-table-column>
			<el-table-column prop="addTime" label="添加时间">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-button v-if="scope.row.courierStationStatus=='1'"
						style="color: blueviolet;background-color: aqua;font-size: 14px;">上架</el-button>
					<el-button v-else-if='scope.row.courierStationStatus=="0"'
						style="color: aqua;background-color: orangered;font-size: 14px;">下架</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<el-link :underline="false" type="primary">查看关联驿站</el-link>
				<template slot-scope="scope">
					<el-link :underline="false" type="primary" v-if="scope.row.courierStationStatus==0"
						@click="ch(scope.row)">立即上架</el-link>
					<el-link :underline="false" type="primary" v-else @click="ch(scope.row)">立即下架</el-link>
					&nbsp;&nbsp;
					<el-link :underline="false" type="primary" @click="editCourierStation(scope.row)">编辑</el-link>
				</template>

			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-row class="block" style="margin-top:10px ;">
			<!-- current-change选择页码时触发的事件，size-change页面展示条数发生变化时，触发的事件-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-row>
		<!-- 新增驿站对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='cancel'>
			<el-form :model="courierStation">
				<el-form-item label="驿站名称:" label-width="90px">
					<el-input v-model="courierStation.courierStationName" placeholder="请输入驿站名称"></el-input>
				</el-form-item>
				<el-form-item label="所属地区:" label-width="90px">
					<el-cascader v-model="address" placeholder="请选择" :options="citys"></el-cascader>
				</el-form-item>
				<el-form-item label="" label-width="90px">
					<el-input v-model="courierStation.courierStationAddress" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="驿站坐标:" label-width="90px">
					<el-button @click="getGeo">获取位置</el-button>
					<span v-show="courierStationLongitude">{{courierStationLatitude}},{{courierStationLongitude}}</span>
				</el-form-item>
				<el-form-item label="所属小区:" label-width="90px">
					<el-select v-model="courierStation.courierStationCommunityName" filterable placeholder="请选择所属小区">
						<el-option v-for="it in communityInfo" :key="it.communityId" :value="it.communityName">
							{{it.communityName}}({{it.communityProvince}}{{it.communityCity}}{{it.communityDistrict}})
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="updatecourierStation">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import citys from '../assets/citydata.js'
	export default {
		data() {
			return {
				queryInfo: { //
					pageNum: 1,
					pageSize: 10,
					courierStationName: '',
					communityName: '',
					courierStationStatus: '',
					startTime: '',
					endTime: ''
				},
				date: '',
				total: 1,
				courierStationList: [],
				addOrUpdateFlag: 1,
				title: '添加驿站',
				dialogFormVisible: false,
				// 创建驿站对象
				courierStation: {
					addTime: "",
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: '',
					courierStationCommunityName: "",
					courierStationDistrict: "",
					courierStationId: '',
					courierStationImage: "",
					courierStationName: "",
					courierStationOrderCount: '',
					courierStationProvince: "",
					courierStationSort: '',
					courierStationStatus: ''
				},
				address: [],
				citys: citys,
				courierStationLongitude: '',
				courierStationLatitude: '',
				communityInfo: []
			}
		},
		methods: {
			//上下架
			ch(row) {
				if (row.courierStationStatus == 0) {
					this.$http.post('courierStation/modifyCourierStation', {
							courierStationId: row.courierStationId,
							courierStationStatus: 1
						})
						.then(res => {
							if (res.data.status == 200)
								row.courierStationStatus = 1
							// this.querySearchCourierStationList()
						})
				} else {
					this.$http.post('courierStation/modifyCourierStation', {
							courierStationId: row.courierStationId,
							courierStationStatus: 0,
						})
						.then(res => {
							if (res.data.status == 200) {
								row.courierStationStatus = 0
								// console.log(res.data)
								// this.querySearchCourierStationList()
							}
						})
				}
			},
			//去修改
			editCourierStation(row) {
				this.dialogFormVisible = true;
				this.title = '编辑驿站';
				this.addOrUpdateFlag = 2;
				this.courierStation = row;
				this.address = [row.courierStationProvince, row.courierStationCity, row.courierStationDistrict]
				this.courierStation.courierStationCommunityName = communityInfo.CommunityName
			},
			//新增驿站
			addCourierStation() {
				this.dialogFormVisible = true;
				this.title = '添加驿站';
				this.addOrUpdateFlag = 1;
				//得到小区集合
				this.$http.get('community/communityList', {
						params: {
							pageNum: 1,
							pageSize: 9999
						}
					})
					.then(res => {
						if (res.data.status == 200) {
							//将查询到
							this.communityInfo = res.data.data.list
						} else {
							this.$message.error('接口数据异常！')
						}
					})
					.catch(err => {
						this.$message.error('服务器接口异常！')
					})
			},
			//获取位置
			getGeo() {
				if (!this.address[0]) {
					this.$message.error('请输入省市区地址');
					return false;
				}
				let add = this.address[0] + this.address[1] + this.address[2] + this.courierStationAddress
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: 'add'
						}
					})
					.then(res => {
						let loc = res.data.geocodes[0].location
						// console.log(res.data.geocodes[0].location)
						this.courierStationLongitude = loc.split(',')[1] //维度
						this.courierStationLatitude = loc.split(',')[0] //经度
					})
			},
			//取消
			cancel() {
				this.dialogFormVisible = false;
				this.courierStation = {
					addTime: "",
					courierStationAddress: "",
					courierStationCity: "",
					courierStationCommunityId: '',
					courierStationCommunityName: "",
					courierStationDistrict: "",
					courierStationId: '',
					courierStationImage: "",
					courierStationName: "",
					courierStationOrderCount: '',
					courierStationProvince: "",
					courierStationSort: '',
					courierStationStatus: ''
				};
				this.address = [];
			},
			//修改
			updatecourierStation() {
				if (this.addOrUpdateFlag == 1) {
					this.$http.post('courierStation/addCourierStation', {
							courierStationAddress: this.courierStation.courierStationAddress,
							courierStationCity: this.courierStation.courierStationCity,
							courierStationCommunityId: this.courierStation.courierStationCommunityId,
							courierStationDistrict: this.courierStation.courierStationDistrict,
							courierStationImage: this.courierStation.courierStationImage,
							courierStationName: this.courierStation.courierStationName,
							courierStationProvince: this.courierStation.courierStationProvince
						})
						.then(res => {
							if (res.data.status == 200) {
								// console.log(res.data)
								this.querySearchCourierStationList();
								this.dialogFormVisible = false;
								this.$message.success('操作成功！');
								this.cancel();
							} else {
								this.$message.error('数据异常！')
							}
						})
				} else {
					this.$http.post('courierStation/modifyCourierStation', this.courierStation)
						.then(res => {
							// console.log(res.data)
							if (res.data.status == 200) {
								this.querySearchCourierStationList()
								this.dialogFormVisible = false;
								this.$message.success('操作成功！');
								this.cancel();
							} else {
								this.$message.error('数据异常！')
							}
						})
				}
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.querySearchCourierStationList();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.querySearchCourierStationList();
			},
			//定义查询方法，调用接口获取数据
			querySearchCourierStationList() {
				this.$http.get('courierStation/querySearchCourierStationList', {
						params: this.queryInfo
					})
					.then(res => {
						// console.log(res.data)
						if (res.data.status == 200) {
							this.courierStationList = res.data.data.list
							this.total = res.data.data.total

						}
					})
					.catch(err => {
						this.$message.error('接口数据异常！')
					})
			},

		},
		mounted() {
			this.querySearchCourierStationList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			address() {
				this.courierStation.courierStationProvince = this.address[0];
				this.courierStation.courierStationCity = this.address[1];
				this.courierStation.courierStationDistrict = this.address[2];
			}
		}
	}
</script>

<style scoped>
</style>